<template>
    <div class="reservsation">
        <div class="dt">
            当前一共有{{ total }}个医生
        </div>
        <div>
            <el-table :data="doctorList" style="width: 100%;font-size: 13px;">
                <el-table-column prop="image" label="宠物头像" width="180">
                    <template slot-scope="{ row }">
                        <el-image style="width: auto; height: 40px; border:none;cursor: pointer;" :src="getImage(row.image)"
                            :preview-src-list="[`http://localhost:8081/common/download?name=${row.image}`]">
                            <div slot="error" class="image-slot">
                                <img src="" style="width: auto; height: 40px; border:none;">
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="description" label="描述">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <i class="el-icon-edit-outline" style="font-size:20px;"
                            @click="jumpToreServation(scope.row.id)">预约</i>
                    </template>
                </el-table-column>
            </el-table>
            <div style="padding: 10px 0;margin-top: 20px; text-align: center;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                    :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            doctorCount: 0,
            doctorList: [],
            page:1,
            pageSize:6,
            total:0
        }
    },
    created() {
        this.getDoctorList()
    },
    methods: {
        jumpToreServation(doctorId) {
            //跳转预约界面 根据医生id跳转
            this.$router.push({ path: `/front/my/toreserve`, query: { doctorId: doctorId } })
            console.log(doctorId)
        },
        getImage(image) {
            return "http://localhost:8081/common/download?name=" + image
        },
        getDoctorList() {
            //获取医生列表数据
            this.request.get("/customer/getDoctor", {
                params: {
                    page: this.page,
                    pageSize: this.pageSize
                }
            }).then(res => {
                if (res.code == 200) {
                    console.log("当前==>", res)
                    console.log("当前==>page", this.page)
                    this.doctorList = res.data.records
                    this.total = res.data.total
                }
            })
        },
        handleSizeChange(pageSize) {//分页每页条数
            this.pageSize = pageSize;
            this.getDoctorList();
        },
        handleCurrentChange(page) {//分页页码选择
            this.page = page;
            this.getDoctorList();
        }

    },
}
</script>

<style lang="less" scoped>
.reservsation {
    padding: 0;

    .dt {
        height: 40px;
        border-bottom: 1px solid gray;
    }
}
</style>